<template>
  <div class="uu-b1">
    <div class="uu-l">
      <div class="uu-ni">
        <span>昵称:</span>
        <el-input v-model="username" size="small"> </el-input>
      </div>
      <div class="uu-text">
        <span>介绍:</span>
        <!-- <input type="" /> -->
        <el-input
          type="textarea"
          placeholder="请输入内容"
          v-model="textarea"
          maxlength="300"
          show-word-limit
          rows="5"
        >
        </el-input>
      </div>
      <div class="uu-sex">
        <span>性别:</span>
        <!-- <input type=""> -->
        <div class="uu-sex1">
          <input
            type="radio"
            name="radio1"
            :checked="usersex == 1"
            @change="changesexman"
          />
          男
        </div>
        <div class="uu-sex1">
          <input
            type="radio"
            :checked="usersex == 2"
            name="radio1"
            @change="changesexwan"
          />
          女
        </div>
      </div>
      <div>
        <!-- <span>生日:</span> -->
        <div class="block">
          <span class="demonstration">生日:</span>
          <el-date-picker v-model="uudate" type="date" placeholder="选择日期">
          </el-date-picker>
        </div>
      </div>
      <!-- 提交 -->
      <div class="uu-btn">
        <el-button type="primary" @click="submituser">保存</el-button>
      </div>
    </div>
    <div class="uu-r">
      <div class="uu-img">
        <img src="@/assets/image/3.png" alt="" />
        <div class="changeimg"></div>
        <a class="image" href="javascript:;">更换头像</a>
      </div>
    </div>
  </div>
</template>


<script>
import { mapState } from "vuex";
import moment from "moment";
export default {
  data() {
    return {
      // 昵称
      username: "",
      //   介绍
      textarea: "",
      //   性别
      usersex: "2",
      //   时间需要转换
      uudate: "",
      userdata: {},
      moment,
    };
  },

  mounted() {
    this.getUserAccount();
  },
  methods: {
    changesexman() {
      this.usersex = 1;
      console.log(Date.parse(this.uudate));
    },
    changesexwan() {
      this.usersex = 2;
    },
    // 获取数据
    async getUserAccount() {
      const olddata = new Date();
      const newdata = Date.parse(olddata);
      const result = await this.$API.reqUserAccount(
        { cookie: this.cookie },
        newdata
      );
      console.log(newdata);
      if (result.code == 200) {
        this.userdata = result.profile || {};
        this.username = result.profile.nickname || "";
        this.textarea = result.profile.signature || "";

        this.uudate = new Date(result.profile.birthday) || "";
        this.usersex = result.profile.gender || "";
      } else {
        this.$msg.error("获取我的失败");
      }
    },
    async submituser() {
      let date = {
        // 性别
        gender: this.usersex,
        birthday: Date.parse(this.uudate),
        // 昵称
        nickname: this.username,
        signature: this.textarea,
        // province:1000000,
        // city:1005000,
        cookie: this.cookie,
      };
      console.log(date);
      const resule = await this.$API.reqUpdate(date);
      console.log(resule);
      //   if(resule.code == 200){
      //         this.getUserAccount()
      //   }else{
      //       this.$msg.error("修改失败");
      //   }
    },
  },
  computed: {
    ...mapState({
      //cookie
      cookie: (state) => {
        return state.User.loginmessage.cookie;
      },
    }),
  },
};
</script>

<style lang="less" scoped>
    .uu-b1 {
  width: 900px;
  display: flex;
  .uu-l {
    width: 340px;
    .uu-ni {
      display: flex;
      margin: 10px auto;
      span {
        width: 50px;
        line-height: 32px;
      }
    }
    .uu-text {
      display: flex;
      margin: 10px auto;
      span {
        width: 50px;
        line-height: 32px;
      }
    }
    .uu-sex {
      display: flex;
      margin: 10px auto;
      span {
        width: 50px;
        line-height: 32px;
      }
      .uu-sex1 {
        line-height: 32px;
        margin-right: 5px;
      }
    }
    .demonstration {
      margin-right: 10px;
    }
    .uu-btn {
      margin-top: 30px;
    }
  }
  .uu-img {
    margin-left: 10px;
    margin-top: 10px;
    width: 140px;
    height: 140px;
    position: relative;
    img {
      width: 140px;
      height: 140px;
    }
    .changeimg {
      position: absolute;
      background: #8e8e8e;
      opacity: 0.8;
      bottom: 0;
      height: 28px;
      width: 100%;
    }
    .image{
       position: absolute;
       bottom: 0;
       width: 100%;
       color: #fff;
       line-height: 28px;
       text-align: center;
       display: block;
    }
  }
}
</style>
